<template>
  <div>
    <el-container>
      <el-container>
        <el-main width="240px" class="leftMain">
          <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
            <el-tab-pane label="终端分组" name="first">
              <bs-edit-icon class="editContainer hover-effect"></bs-edit-icon>
              <bs-setting-icon class="settingContainer hover-effect"></bs-setting-icon>
              <bs-refresh-icon class="refreshContainer hover-effect"></bs-refresh-icon>
            </el-tab-pane>
            <el-tab-pane label="终端标签" name="second">
              <bs-edit-icon class="editContainer hover-effect"></bs-edit-icon>
              <bs-setting-icon class="settingContainer hover-effect"></bs-setting-icon>
              <bs-refresh-icon class="refreshContainer hover-effect"></bs-refresh-icon>
            </el-tab-pane>
          </el-tabs>
          <bs-tree
            :tree-data="treeData"
            :default-checked-keys="defaultCheckedKeys"
            :show-checkbox="false"
            :draggable="false"
            :filter-visible="false"
            :context-menu-visible="false"
            :context-menu-data="contextMenuData"
          ></bs-tree>
        </el-main>
        <el-main class="rightMain">
          <div class="opration">
            <div class="oprationLeft">
              <bs-add-button-icon @click="test"></bs-add-button-icon>
              <!-- <edit-button-icon></edit-button-icon> -->
              <bs-delete-button-icon></bs-delete-button-icon>
              <bs-examine-button-icon></bs-examine-button-icon>
              <bs-set-button-icon></bs-set-button-icon>
              <bs-refresh-button-icon></bs-refresh-button-icon>
              <el-select class="show-item" size="small" v-model="showItem" placeholder="显示子元素" clearable style="width:115px;">
                <el-option label="显示子元素" value="show"></el-option>
                <el-option label="隐藏子元素" value="hide"></el-option>
              </el-select>
            </div>
            <div>
              <el-form :inline="true" size="small" :model="searchForm">
                <el-form-item>
                  <el-select v-model="searchForm.name" placeholder="终端名称" clearable style="width:120px;">
                    <el-option label="终端名称" value="zhongduanmingcheng"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-input placeholder="请输入关键词搜索" v-model="searchForm.value" clearable style="width:160px;">
                    <template slot="prepend"><i class="iconfont icon-sousuo" /></template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <bs-search-button-icon></bs-search-button-icon>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <el-table :data="tableData" border ref="tableDataRef" size="small">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
            <el-table-column
              v-if="colData[0].istrue"
              prop="name"
              :label="colData[0].title"
              align="center"
            >
              <template slot="header">
                {{ colData[0].title }}
                <i class="el-icon-arrow-down el-icon--right" @mouseenter="mouseEnterHandler" @click="mouseEnterHandler"></i>
              </template>
            </el-table-column>
            <el-table-column
              v-if="colData[1].istrue"
              prop="select"
              :label="colData[1].title"
              align="center"
            >
              <template slot="header">
                {{ colData[0].title }}
                <i class="el-icon-arrow-down el-icon--right" @mouseenter="mouseEnterHandler" @click="mouseEnterHandler"></i>
              </template>
            </el-table-column>
            <el-table-column v-if="colData[2].istrue" prop="kafang" label="年龄" align="center"></el-table-column>
            <el-table-column v-if="colData[3].istrue" prop="fengbi" label="时间" align="center"></el-table-column>
            <el-table-column v-if="colData[4].istrue" prop="isETF" label="事件" align="center"></el-table-column>
            <el-table-column v-if="colData[5].istrue" prop="range" label="地点" align="center"></el-table-column>
          </el-table>

          <div v-show="showContextMenu" id="tableRightClickMenu">
            <div class="download" v-for="item in dropdownList" :key="item.value">
              <div :class="item.visible ? 'act download-left' : 'download-left'" @mouseenter="shareFiles(item)">
                <span class="download-txt el-icon-plus">{{ item.label }}</span>
                <span class="el-icon-arrow-right icon" v-if="item.children" style="float: right;"></span>
              </div>
              <div class="download-right" v-show="item.visible">
                <div v-for="(it, index) in item.children" :key="index" class="download-item">
                  <el-checkbox :checked="it.istrue" @change="hideTableCell($event, it)">{{ it.title }}</el-checkbox>
                </div>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      showContextMenu: false,
      searchForm: {},
      showItem: '',
      tableData: [
        {
          name: 'a',
          select: 'b',
          kafang: 'c',
          fengbi: 'd',
          isETF: 'e',
          range: 'f',
        },
        {
          name: 'a',
          select: 'b',
          kafang: 'c',
          fengbi: 'd',
          isETF: 'e',
          range: 'f',
        },
      ],
      colData: [
        { title: '名称', istrue: true, visible: false },
        { title: '性别', istrue: true, visible: false },
        { title: '年龄', istrue: true, visible: false },
        { title: '时间', istrue: true, visible: false },
        { title: '事件', istrue: true, visible: false },
        { title: '地点', istrue: true, visible: false },
      ],
      dropdownList: [
        {
          visible: false,
          value: '1',
          label: '升序',
        },
        {
          visible: false,
          value: '2',
          label: '降序',
        },
      ],
      // 树结构
      treeData: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
            },
          ],
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1',
            },
            {
              label: '二级 2-2',
            },
          ],
        },
      ],
      defaultCheckedKeys: [],
      contextMenuData: []
    }
  },
  components: {
  },
  mounted: function () {
    this.$nextTick(function () {
      this.handleCommand()
    })
  },
  methods: {
    test() {
      alert(1)
    },
    mouseEnterHandler(event) {
      this.showContextMenu = true
      let menu = document.querySelector('#tableRightClickMenu')
      menu.style.position = 'absolute'
      menu.style.top = '210px'
      menu.style.left = event.clientX - 280 + 'px'
      // 监听点击事件
      this.addEventClick()
    },
    addEventClick() {
      window.addEventListener('click', this.closeTableContentMenu)
    },
    closeTableContentMenu(evt) {
      const download = evt.target.closest('.download')
      if (!download) {
        this.showContextMenu = false
        window.removeEventListener('click', this.closeTableContentMenu)
      }
    },
    shareFiles(item) {
      this.dropdownList.map((it) => {
        this.$set(this.dropdownList[it.value - 1], 'visible', false)
      })
      this.$set(
        this.dropdownList[item.value - 1], 'visible', !this.dropdownList[item.value - 1].visible
      )
    },
    handleClick(tab, event) {},
    formatter(row, column) {
      return row.address
    },
    hideTableCell(ischecked, data) {
      data.istrue = ischecked
      // this.$set(this.dropdownList[2].children[5], 'istrue', ischecked)
    },
    handleCommand() {
      const item = {
        visible: false,
        value: '3',
        label: '列',
        children: this.colData
      }
      this.dropdownList.push(item)
    }
  }
}
</script>

<style lang="scss" scoped>
// import '@/styles/bs-common.scss';
.editContainer {
  line-height: 36px;
}
.settingContainer {
  line-height: 36px;
}
.refreshContainer {
  line-height: 36px;
}

.leftMain {
  width: 250px;
  background-color: $bg-ff; 
  min-height: calc(100vh - 155px); 
  margin: 15px;
  padding: 0px;
  border: 1px solid #e9e9e9;
}

.rightMain {
  background-color: $bg-ff; 
  min-height: calc(100vh - 155px); 
  margin: 15px 15px 15px 0;
  border: 1px solid #e9e9e9;
}

.opration {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  .oprationLeft button {
    margin: 0 12px 17px 0;
  }
}

.download {
  width: 120px;
  height: 40px;
  font-size: 14px;
  background-color: $bg-ff;
  border: 1px solid $bg-e9;
  z-index: 9999;
  .download-left {
    display: flex;
    .download-txt {
      flex: 1;
      line-height: 40px;
      margin-left: 10px;
      color: #606266;
    }
    .icon {
      line-height: 40px;
      color: #606266;
      margin-right: 10px;
    }
  }
  .act {
    background: #ccc;
    border-radius: 6px;
    .download-txt {
      color: #179bff;
    }
  }
  .download-right {
    position: absolute;
    right: -120px;
    top: 80px;
    width: 120px;
    height: 250px;
    background: #fff;
    border-radius: 6px;
    .download-item {
      display: flex;
      flex-direction: column;
      padding: 10px;
      cursor: pointer;
      color: #b6b6c8;
      .item-txt {
        flex: 1;
        display: flex;
        align-items: flex-end;
        font-size: 14px;
      }
      .item-fps {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 12px;
      }
    }
    .download-item:hover {
      background: #ccc;
      color: #179bff;
      border-radius: 6px;
    }
  }
}
</style>
